<template>
  <!--
    使用下面属性设置 token
    :headers='{ token }'
    name - 上传的文件名
   -->
  <el-upload drag :action="uploadUrl" multiple name='file' :data='data' :on-success='uploadSuccess' :on-error='uploadError'>
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script setup>
// import { UploadFilled } from '@element-plus/icons-vue'
import { uploadUrl } from '~/api/image'
import { getToken } from '~/composables/auth'
import { useToast } from 'vue-toastification'

// 用于接受父组件传递来的图片分类的ID
defineProps({
  data: {
    type: Object,
    required: true
  }
})

const token = getToken()
const toast = useToast()

const uploadSuccess = (response, uploadFile, uploadFiles) => {
  console.log(response)
  emits('success',response, uploadFile, uploadFiles)
}

const uploadError = (error, uploadFile, uploadFiles) => {
  console.log(error)
  toast.error('上传失败！')
}

const emits = defineEmits(['success'])
</script>